<template>
  <div class="shop">
    <el-row style="background-color: #d5d5d5; margin-top: 10px">
      <el-col :span="12" :xs="24">
        <span>欢迎进入时尚小院！</span>
        <span class="login-link">
          <el-link>请登录</el-link>
        </span>
        <span class="setup-link">
          <el-link>快速注册</el-link>
        </span>
      </el-col>
      <el-col
        class="header-breadcrumb"
        :span="12"
        :xs="24"
        style="padding-top: 2px"
      >
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>商品真实</el-breadcrumb-item>
          <el-breadcrumb-item>订单查询</el-breadcrumb-item>
          <el-breadcrumb-item>收藏品牌</el-breadcrumb-item>
          <el-breadcrumb-item>
            <el-dropdown placement="bottom" trigger="click">
              <span>
                我的小院
                <i class="el-icon-arrow-down"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>1</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <el-dropdown placement="bottom" trigger="click">
              <span>
                更多
                <i class="el-icon-arrow-down"></i>
              </span>
              <template v-slot:dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>1</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="5" style="text-align: center" :xs="24">
        <el-link style="font-size: 25px">时尚小院</el-link>
      </el-col>
      <el-col :span="10" :xs="12">
        <el-form :model="form" inline>
          <el-form-item label size="small" prop="search">
            <el-input
              type="text"
              :value="form.search"
              clearable
              style="width: 170%"
              placeholder="做最美女人，对自己好一点"
            >
              <template #append>
                <el-button type="primary" size="small">
                  <i class="el-icon-search"></i>
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-row class="breadcrumb-tab">
          <el-col :span="24" :xs="24">
            <el-breadcrumb separator="|">
              <el-breadcrumb-item>保湿</el-breadcrumb-item>
              <el-breadcrumb-item>面膜</el-breadcrumb-item>
              <el-breadcrumb-item>洗面奶</el-breadcrumb-item>
              <el-breadcrumb-item>补水</el-breadcrumb-item>
              <el-breadcrumb-item>香水</el-breadcrumb-item>
              <el-breadcrumb-item>眼霜</el-breadcrumb-item>
              <el-breadcrumb-item>口红</el-breadcrumb-item>
              <el-breadcrumb-item>护肤</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="5" :push="2" :xs="24">
        <el-dropdown placement="bottom" trigger="hover">
          <el-button type="primary">
            <span class="el-icon-sell"></span>
            <span>
              购物车结算
              <span class="el-icon-arrow-down"></span>
            </span>
          </el-button>
          <template v-slot:dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <span>支付</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span>余额</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>
    <div
      style="
        background-color: black;
        color: white;
        font-size: 15px;
        margin-top: 20px;
        height: 20px;
      "
    >
      <el-row>
        <el-col :span="24" :xs="24">
          <el-row>
            <el-col :span="3" :xs="3">首页</el-col>
            <el-col :span="3" :xs="3">
              <el-link>
                <span style="color: white">极速免税店</span>
              </el-link>
            </el-col>
            <el-col :span="3" :xs="3">
              <el-link>
                <span style="color: white">母婴特卖</span>
              </el-link>
            </el-col>
            <el-col :span="3" :xs="3">
              <el-dropdown trigger="hover">
                <span style="color: white">
                  美妆商场
                  <i class="el-icon-arrow-down"></i>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <el-row>
                        <el-col :span="8" :xs="8">
                          <p>
                            <strong>大牌</strong>
                          </p>
                        </el-col>
                        <el-col :span="8" :xs="8">
                          <p>
                            <strong>护肤</strong>
                          </p>
                          <p>兰蔻</p>
                        </el-col>
                        <el-col :span="8" :xs="8">
                          <p>
                            <strong>彩妆</strong>
                          </p>
                        </el-col>
                      </el-row>

                      <el-row>
                        <el-col :span="8" :xs="8">
                          <p>
                            <strong>香氛</strong>
                          </p>
                        </el-col>
                        <el-col :span="8" :xs="8">
                          <p>
                            <strong>男士专区</strong>
                          </p>
                        </el-col>
                        <el-col :span="8" :xs="8">
                          <p>
                            <strong>热门新品</strong>
                          </p>
                        </el-col>
                      </el-row>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
            <el-col :span="3" :xs="3">国际轻奢</el-col>
            <el-col :span="3" :xs="3">服装运动</el-col>
            <el-col :span="3" :xs="3">鞋包配饰</el-col>
            <el-col :span="3" :xs="3">更多</el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <el-row style="background-color: black">
      <el-col :span="22" :push="1" :xs="20">
        <el-carousel setActiveName="a">
          <el-carousel-item name="a">
            <el-image
              src="/static/lankou.jpg"
              style="height: 88%; width: 100%"
            ></el-image>
          </el-carousel-item>
          <el-carousel-item name="b">
            <el-image
              src="/static/baoshi.jpg"
              style="height: 88%; width: 100%"
            ></el-image>
          </el-carousel-item>
          <el-carousel-item name="c">
            <el-image
              src="/static/kangshuai.jpg"
              style="height: 88%; width: 100%"
            ></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <h2 style="text-align: center">
          <strong>每日新品</strong>
        </h2>
      </el-col>
      <el-col :span="8">
        <el-image src="/static/lankou.jpg" style></el-image>
      </el-col>
      <el-col :span="8">
        <el-image src="/static/baoshi.jpg" style></el-image>
      </el-col>
      <el-col :span="8">
        <el-image src="/static/kangshuai.jpg" style></el-image>
      </el-col>
    </el-row>
    <el-row
      style="
        position: fixed;
        top: 0px;
        right: 5px;
        height: 100%;
        width: 2%;
        background: salmon;
        color: white;
      "
    >
      <el-col :span="24" :xs="24" style="margin-top: 100px">
        <p>
          <el-dropdown placement="top-start">
            <i class="el-icon-user" style="font-size: 30px"></i>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-link>登录</el-link>
                  <el-link>注册</el-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </p>
        <h4>
          <i class="el-icon-sell" style="font-size: 30px"></i>
          <br />
          <h4 style="text-align: center">购物车</h4>
        </h4>
        <p>
          <span style="font-size: 20px; margin-left: 7px" title="我的钱包"
            >$</span
          >
        </p>
        <p>
          <el-tooltip content placement="left">
            <span style="font-size: 48px; margin-left: 5px">*</span>
            <template #content>
              <span>我的心愿</span>
            </template>
          </el-tooltip>
        </p>
        <p>
          <el-tooltip content placement="left">
            <span style="font-size: 15px; margin-left: 5px">脚</span>
            <template #content>
              <span>我的足迹</span>
            </template>
          </el-tooltip>
        </p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    const generateData = (_) => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0,
        });
      }
      return data;
    };
    return {
      form: {
        search: "",
      },

      dat: generateData(),
      valu: [1, 4],
      //picker是选择器的意思
      ti: [new Date(2018, 10, 1, 8, 20), new Date(2020, 10, 1, 8, 20)], //is-range范围
      startTime: "",
      a: 3.7,
      color2: null,
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ],
      // iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'],
      //colors:["black","blue","red"],
      colors: { 2: "black", 3: "salmon", 4: "red", 5: "skyblu" },
      co: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      endTime: "",
      data: "",
      time: new Date().toLocaleString(),
      mar: {
        30: "30分",
        50: "50分",
        40: {
          //控件基本有change blur focus
          style: {
            //marks取值样式
            color: "red",
          },
          // label: this.createElement("strong", "40%"), //屏幕阅读器标签
        },
      },
      su: [30, 50], //show-stops是断点显示，输入框步伐
      suma: 50,
      sumb: 30,
      d: 100, //:content
      t: true,
      e: this.$store.getters.he,
      data: [],
      value: [
        {
          value: "z", //键名不能相同
          label: "q", //键值用于显示
          children: [
            //子菜单
            {
              value: "s",
              label: "w",
            },
            {
              value: "e",
              label: "f",
            },
          ],
        },
        {
          value: "r",
          label: "q",
          children: [
            {
              value: "s",
              label: "w",
            },
            {
              value: "e",
              label: "f",
            },
          ],
        },
      ],
    };
  },
  methods: {},
};
</script>
<style lang="scss" >
.shop {
  .header-breadcrumb {
    .el-breadcrumb__inner {
      color: skyblue;
      .el-dropdown {
        color: red;
      }
    }
  }
  .login-link,
  .setup-link {
    .el-link--inner {
      color: salmon;
    }
  }
  .breadcrumb-tab {
    .el-breadcrumb__inner {
      color: black;
    }
  }
}
</style>

